<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>Document</title>
    <link rel="stylesheet" href="./constom/css/bootstrap.main.css"/>
    <link rel="stylesheet" type="text/less" href="./constom/css/css.less"/>
    <script src="./constom/js/less.1.7.4.js" type="text/javascript"></script>
    <script src="./constom/js/jquery-1.11.1.min.js"></script>
</head>
<body>
    <div class="A1 container-fluid " style="cursor: url('01.ico'),default;transition: 1s all">
        <h1 style="margin: auto;margin-left: 35%;">打豆豆</h1>
        <span class="cc1">倒计时</span>   <span class="CC"></span>
        <span class="dd1" style="margin-left: 180px;">得分</span>
        <span class="dd"style="margin-left: 10px;">0</span>
        <div class="row col-xs-offset-2" >
            <div class="aa1 col-xs-3" style="width: 100px;">

            </div>
            <div class="aa2 col-xs-3" style="width: 100px;">

            </div>
            <div class="aa3 col-xs-3" style="width: 100px;">

            </div>
        </div>
        <div class="row col-xs-offset-2" >
            <div class="aa4 col-xs-3" style="width: 100px;">

            </div>
            <div class="aa5 col-xs-3" style="width: 100px;">

            </div>
            <div class="aa6 col-xs-3" style="width: 100px;">

            </div>
        </div>
        <div class="row col-xs-offset-2" >
            <div class="aa7 col-xs-3" style="width: 100px;">

            </div>
            <div class="aa8 col-xs-3" style="width: 100px;">

            </div>
            <div class="aa9 col-xs-3" style="width: 100px;">

            </div>
        </div>



    </div>

</body>

<script>
    $(".A1").on("click",function(){
        $(".A1").css({
            "cursor": "url('02.ico'),default"
        });
      setTimeout(function(){
          $(".A1").css({
              "cursor": "url('01.ico'),default"
          });
      },100);
    });
    var a;
    var sj;
    $.ajax({
        url:"/log",
        type:"post",
        data:{

        },
        success:function(data){
            console.log(data);
        }
    });
    var p=0;
  var dd=setInterval(function(){
      sj=parseInt(Math.random()*10);
          a=sj;
        $(".aa"+a).css({
            "background-image":"url(2.gif)",
            "background-size":"95%"

        });
        setTimeout(function(){
            for(var i=1;i<=9;i++){
                $(".aa"+i).css({
                    background:"#000"
                })
            }
        },1300);
      for(var c=1;c<=9;c++){
          if(c==sj){

              $(".aa"+c).one("click",function(){

                  p++;
                  console.log(p);
                  $(".dd").html(p);
                  $(this).css({"background-image":"url(3.gif)",  "background-size":"95%"})


              });
          }else{
              $(".aa"+c).unbind("click");
          }

      }



    },1500);

    var ww=60;
   var bb=setInterval(function(){

        ww--;
        $(".CC").html(ww);
       if(ww<=0){
           clearInterval(dd);
           clearInterval(bb);
           console.log("###");
       }

    },1000);







</script>
</html>